v

2023-10-05 23:21| 来源: 网络整理| 查看: 265

v-infinite-scroll（Element UI）滚动到底不触发（笔记本）现象先答案原因解决思路1、设置滚动元素的padding2、反复设置padding放弃，查看数据层3、baidu 还有github查 issue4、[读源码](https://github.com/ElemeFE/element/blob/dev/packages/infinite-scroll/src/main.js) 其他尝试1、可能是disabled 传值为false2、dom之间的嵌套关系、padding、margin3、嵌套了draggable

现象

1.我用14寸win笔记本开发连普通屏幕正常，测试用的笔记本（1920 分辨率，150%缩放）测出此问题 2.用chrome调试工具测试不同分辨率，某些分辨率偶尔复现此问题，小于一般笔记本的分辨率也不一定不复现

先答案

设置属性 infinite-scroll-distance='1’

原因

infinite-scroll 指令计算方式导致计算出现小数，导致计算结果为 0.*****；如下图在这里插入图片描述

解决思路 1、设置滚动元素的padding

先搞清测试笔记本屏幕设置参数正常触发了、所以以为是padding等属性问题，高度高于外层container导致没有触发，所以在笔记本屏幕下，修改padding直至高度小于外层container。

2、反复设置padding放弃，查看数据层

测试说复现后，反复设置padding、偶现次情况。还是觉得高度计算导致的。但是最终看方法是否触发，绑定值是否变化。

3、baidu 还有github查 issue

此处省略几百字

4、读源码

稍微有点空闲时候，果断读源码，最近也习惯读饿了么UI源码读了啥都明白了，再用下打点调试，验证

其他尝试 1、可能是disabled 传值为false

反复检查自己的数据管理

2、dom之间的嵌套关系、padding、margin

猜测是父子dom的滚动(overflow)关系,或者是边距导致的top属性之类的计算。在浏览器上通过改变padding触发了一次loadmore，所以纠结是适配问题但是用的是padding，且设置关闭过相关属性，无果

3、嵌套了draggable

子级dom用了draggable，习惯性的怪它。但没有太多迹象，未作过多尝试

【本文地址】

公司简介

联系我们